<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 10px dashed #f00;
            margin: 50px;
            /* background-color: pink; */
            background-image: url(../image/1.png);
            background-repeat: no-repeat;
            /* 背景图是否要重复 */
            /* 
                repeat 重复 一直到填满
                no-repeat
                repeat-x 水平铺满一整行 
                repeat-y 垂直铺满一整行

            */

            /* background-position: right bottom; */
            /* background-position: center center; */
            /* 
                background-position  背景定位
                主要用于设置不重复的图片在背景区域的加载开始位置
                属性值：单词表示法 像素表示法 百分比表示法

                单词表示法 
                    水平：left center right
                    垂直：top center bottom

                像素表示法
                    xpx ypx
                    background-position: -100px -100px;
                    选择某张大图的某一部分 一般都用的负数

                百分比表示法
                    background-position: 50% 50%;

            */

            /* 
                背景附着 background-attachment
                设置的是背景图片是否要随着页面或者盒子的滚动而滚动
                scroll 背景图跟着走
                fixed 背景固定
                background-attachment: scroll;
                background-attachment: fixed;
                若是box里的图片加上此种效果 图片的位置的对应就是窗口的位置
                此属性一般为背景图设置

            */

            /* 
                综合写法 有五个属性值 url repeat position attachment
                background: url(../image/1.png) no-repeat center top fixed lightblue
                除了center top不能改 其他的位置可以改 但是一般把颜色写在最后
                五个元素如果有没写的 会按照默认值加载
                可以用单一属性 去层叠综合
                background-color: pink;
            */
        }
        .pos {
            width: 300px;
            height: 200px;
            background-image: url(../image/1.png);
            background-repeat: no-repeat;
            background-position: -200px -300px;
        }
    </style>
</head>
<body>
    <div class="box">111</div>
    <div class="box">111</div>
    <div class="box">111</div>
    <div class="box">111</div>
    <div class="box">111</div>

    <div class="pos">222</div>
</body>
</html>